<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="心选商城"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <img
            class="imgq"
            src="https://z3.ax1x.com/2021/07/17/Wloqr8.png"
            alt=""
          />
        </template>
      </van-nav-bar>
      <div>
        <van-search
          v-model="value"
          shape="round"
          background="#fff"
          placeholder="搜索商品"
        />
        <span class="sp"
          ><img src="https://z3.ax1x.com/2021/07/17/WlTWQ0.png" alt=""
        /></span>
      </div>

      <div class="meihao">
        美好生活&nbsp;不知阅读
        <span class="vip">&nbsp;&nbsp;会员·积分抵扣·VIP再享9.6折优惠</span>
      </div>
    </div>
    <div class="genduo">
      <ul>
        <li>
          <em
            >9.9 <br />
            特惠</em
          >
          <span>9.9特惠</span>
        </li>
        <li>
          <em
            >做好 <br />
            父母
          </em>
          <span>做好父母</span>
        </li>
        <li>
          <em
            >学习 <br />
            进步</em
          >
          <span>学习进步</span
          ><img
            class="img22"
            src="https://z3.ax1x.com/2021/07/17/WlXynI.png"
            alt=""
          />
        </li>
        <li>
          <em
            >名人 <br />
            传记</em
          >
          <span>9名人传记</span>
        </li>
        <li>
          <em
            >吃喝 <br />
            研究</em
          >
          <span>吃喝研究</span>
        </li>
        <li>
          <em
            >更多<br />
            好书</em
          >
          <span>更多好书</span>
        </li>
      </ul>
      <div class="fan">
        <p class="p1">
          &nbsp;&nbsp;&nbsp;樊登讲书专栏<span class="sp1"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;一周一本
            成长看得见</span
          ><span class="sp3">更多></span>
        </p>
      </div>
      <div class="jiedulan">
        <ul class="item">
          <li>
            <img src="https://z3.ax1x.com/2021/07/17/WlxMh8.png" alt="" /><span
              >6月26日解读</span
            >
          </li>
          <li>
            <img src="https://z3.ax1x.com/2021/07/17/WlxUA0.png" alt="" /><span
              >7月03日解读</span
            >
          </li>
          <li>
            <img src="https://z3.ax1x.com/2021/07/17/WlxdhT.png" alt="" /><span
              >即将解读</span
            >
          </li>
        </ul>
        <div class="dingyue">
          <div class="bang">
            <p>樊登·未来书单--帮你养</p>
            <p>成阅读好习惯</p>
            <p>1周1本本与樊登同步阅读</p>
            <button>一键订阅</button>
          </div>
          <div class="img3">
            <img src="https://z3.ax1x.com/2021/07/17/WlzNKH.png" alt="" />
          </div>
        </div>
      </div>
      <div class="jieyou">
        <p class="p5">
          &nbsp;&nbsp;&nbsp;解忧杂货铺<span class="sp5"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; | 用心甄选
            有趣好用
          </span>
        </p>

        <!-- <div class="jiangkang"></div> -->
      </div>
      <div class="wenren">
        <div class="wenren1">
          <div class="wenren2">
            <img src="https://z3.ax1x.com/2021/07/17/Wlz4I0.png" alt="" />
          </div>
          <div class="wenren3">
            <p>来看看文人的消暑秘方！<span>新</span></p>
            <p>酷暑难熬？消夏指南在手,徒添不在伏天不在怕的~</p>

            <p>内含21见商品·<span>9765</span>人看过</p>
          </div>
        </div>
        <div class="wenren1">
          <div class="wenren2">
            <img src="https://z3.ax1x.com/2021/07/17/W1SSJK.png" alt="" />
          </div>
          <div class="wenren3">
            <p>如何活出更好自己？<span style="background: red">热</span></p>
            <p>好书好物，让你不负岁月更不负自己</p>

            <p style="margin-top: 25px">内含21见商品·<span>5w+</span>人看过</p>
          </div>
        </div>
      </div>
      <div class="fan">
        <p class="p1">
          &nbsp;&nbsp;&nbsp;心选社<span class="sp1"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;| 用心甄选
            有趣好用</span
          ><span class="sp3">更多></span>
        </p>
      </div>
      <div class="zhaopian">
        <img
          class="imgzz"
          src="https://z3.ax1x.com/2021/07/17/W1ScY6.png"
          alt=""
        />
      </div>
    </div>
  </div>
  <ShopTow />
  <!-- <Foorter /> -->
</template>

<script>
// import { ref } from "vue";

import ShopTow from "../../components/Shop/ShopTow.vue";
import { useRouter } from "vue-router";
// import Foorter from "../public/Foorter.vue";

export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };

    // const value = ref("");

    return {
      onClickLeft,
      useRouter,
      // value,
    };
  },
  components: {
    ShopTow,
    // Foorter,
  },
};
</script>

<style lang="less">
.top {
  width: 371px;
  height: 150px;

  background: #ffffff;

  .van-nav-bar__text {
    color: #000;
    font-size: 12px;
    font-weight: 800;
  }
  .van-icon-arrow-left:before {
    font-size: 22px;
    color: black;
  }
  .van-nav-bar__title {
    font-size: 15px;
    font-weight: 900;
  }
  .van-search {
    width: 350px;
    position: relative;
    margin-top: 3px;
  }
  .sp {
    position: absolute;
    top: 66px;
    right: 40px;
  }
  .meihao {
    margin-left: 12px;
    width: 145px;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-family: PingFangSC !important;
    font-weight: 600;
    width: 100%;
    color: #272727;

    .vip {
      width: 190px;
      height: 11px;
      font-size: 11.5px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #747474;
    }
  }
}
.zhuti {
  width: 500px;
  height: 500px;
  background: olive;
  margin-top: 185px;
}
.genduo {
  background: #f7f7f7;
  width: 100%;

  ul {
    padding-top: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
    li {
      border-radius: 15px;
      width: 110px;
      height: 45.5px;
      background: #eeecee;
      margin-bottom: 11px;
      display: flex;

      justify-content: space-evenly;
      align-items: center;
      position: relative;
      .img22 {
        position: absolute;
        top: -10px;
        right: 0;
      }
      em {
        width: 30px;
        height: 33px;
        font-size: 8px;
        font-weight: 500;
        color: white;
        overflow: hidden;
        text-align: center;

        font-weight: 800;
        border-radius: 15px;
        background: #667b96;
      }
      span {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #333333;
        font-weight: 600;
      }
    }
  }
  .fan {
    position: relative;
    .p1 {
      height: 17px;
      font-size: 17px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #272727;
      margin: 20px 0;
    }
    .sp1 {
      font-size: 11.5px;
      font-family: PingFangSC;
      font-weight: 600;
      margin-bottom: 10px;
      color: #747474 !important;
    }
    .sp3 {
      height: 12px;
      font-size: 13px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #747474;
      position: absolute;
      right: 12px;
      top: 0px;
    }
  }
  .jiedulan {
    height: 345px;
    background: #ffffff;
    border-radius: 15px;
    width: 380px;
    margin: auto;
    margin-top: 15px;

    .item {
      height: 159px;
      li {
        width: 94px;
        height: 132.5px;
        background: rosybrown;
        position: relative;
        border: 1px lavender dashed;
        img {
          width: 100%;
          height: 100%;
        }
        span {
          position: absolute;
          bottom: -15px;

          height: 11px;
          font-size: 11.5px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #747474;
        }
      }
    }
    .dingyue {
      width: 323px;
      height: 135px;
      background: #f0eede;
      border-radius: 15px;
      margin: auto;
      margin-top: 25px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;

      .bang {
        p:nth-child(1) {
          height: 15px;

          font-size: 16px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #363637;
        }
        p:nth-child(2) {
          height: 15px;
          font-size: 16px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #363637;
        }
        p:nth-child(3) {
          margin-top: 15px;
          margin-bottom: 15px;
          height: 11px;
          font-size: 11.5px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #747474;
        }
        button {
          background: #667b96;
          border-radius: 3px;
          font-size: 14px;
          color: whitesmoke;
          margin-bottom: -1px;
        }
      }

      .img3 {
        width: 94px;
        height: 105px;
        background: violet;
      }
    }
  }
  .jieyou {
    margin-top: 45px;
    .p5 {
      height: 19px;
      font-size: 18px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #363637;
      margin-top: -15px;
      padding-bottom: 35px;
    }
    .sp5 {
      height: 12px;
      font-size: 12px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #858585;
    }
  }

  // .jiangkang {
  //   width: 100%;
  //   height: 457px;
  //   background: lavenderblush;
  // }
  .wenren {
    width: 380px;
    height: 229px;
    background: #ffffff;
    border-radius: 15px;
    margin: auto;
    flex-direction: column;
    justify-content: space-evenly;
    display: flex;

    .wenren1 {
      display: flex;
      justify-content: space-evenly;
      .wenren2 {
        width: 95px;
        height: 95px;
        border: 1px lightgray dashed;
      }
      .wenren3 {
        height: 95px;

        flex-direction: column;

        width: 248px;

        p:nth-child(1) {
          font-size: 18px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #363637;
          margin-bottom: 15px;
          span {
            width: 30px;
            height: 30px;
            color: whitesmoke;
            font-size: 6px;
            background: #e96743;
            border-radius: 15px;
          }
        }
        p:nth-child(2) {
          width: 100%;

          font-size: 11.5px;
          margin-bottom: 15px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #858585;
          white-space: break-all;
        }
        p:nth-child(3) {
          font-size: 11.5px;
          font-family: PingFangSC;
          font-weight: 600;
          color: #858585;
          span {
            color: orange;
          }
        }
      }
    }
  }
  .zhaopian {
    width: 100%;
    height: 485px;
    background: #e96743;
    border: 1px lightgray dashed;
    .imgzz {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
